<template>
  <base-paenl>
    <span slot="header">从业主体信息</span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        class="panel-item"
        @click="showDialog(item)"
      >
        <div
          :class="
            ['租赁企业数', '经纪机构数'].includes(item.name)
              ? 'panel-row clickable'
              : 'panel-row'
          "
        >
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div
              class="panel-row-content-name panel-row-content-name1"
              :title="item.name"
            >
              {{ item.name }}
            </div>
            <div
              class="panel-row-content-value panel-row-content-value1"
              :title="item.value"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
        <div
          v-if="item.children"
          :class="
            ['租赁企业数', '经纪机构数'].includes(item.name)
              ? 'panel-second-row clickable'
              : 'panel-second-row'
          "
        >
          <div
            v-for="(subItem, subIndex) of item.children"
            :key="subIndex"
            :class="
              ['企业提交开业报告数：', '企业采集数：'].includes(subItem.name)
                ? 'panel-second-content'
                : 'panel-second-content panel-second-content1'
            "
          >
            <img
              src="../../assets/images/panels/xiaobiaotitubiao.png"
              width="12px"
              height="12px"
            />
            <div class="panel-second-content-name">{{ subItem.name }}</div>
            <div class="panel-second-content-value">{{ subItem.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getEmployeeInfo } from "@/assets/modules/service";
// import mockData from "@/static/json/mockData.json";
// import axios from "axios";

@Component({
  name: "EmployeeInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData(val: any) {
    this.getEmployeeInfo();
  }
  @Watch("datePickerValue", { deep: true })
  handleDatePickerValue(val: any) {
    this.getEmployeeInfo();
  }
  dataList: any = [];
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.employeeInformation;
    this.getEmployeeInfo()
  }
  getEmployeeInfo() {
    const data: any = {
      // dataTime: this.datePickerValue,
      kssj: this.datePickerValue[0] ? this.datePickerValue[0] : '',
      jssj: this.datePickerValue[1] ? this.datePickerValue[1] : '',
      code: this.areaData.areaCode,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList
    };
    // axios.get("/json/mockData.json").then((resData: any) => {
    //   const res = resData.data[val].employeeInfo;
    //   if (res?.data) {
    //     if (res.data.zlqyTotal) {
    //       this.dataList.zlqys.value = res.data.zlqyTotal.zlqysTotal;
    //       this.dataList.zlqys.children.qytjkybgs.value =
    //         res.data.zlqyTotal.qytjkybgsTotal;
    //       this.dataList.zlqys.children.qycjs.value =
    //         res.data.zlqyTotal.qycjsTotal;
    //     } else {
    //       this.dataList.zlqys.value = 0;
    //       this.dataList.zlqys.children.qytjkybgs.value = 0;
    //       this.dataList.zlqys.children.qycjs.value = 0;
    //     }
    //     if (res.data.jjjgTotal) {
    //       this.dataList.jjjgs.value = res.data.jjjgTotal.jjjgsTotal;
    //       this.dataList.jjjgs.children.jgbas.value =
    //         res.data.jjjgTotal.jgbasTotal;
    //       this.dataList.jjjgs.children.jgcjs.value =
    //         res.data.jjjgTotal.jgcjsTotal;
    //     } else {
    //       this.dataList.jjjgs.value = 0;
    //       this.dataList.jjjgs.children.jgbas.value = 0;
    //       this.dataList.jjjgs.children.jgcjs.value = 0;
    //     }
    //     if (res.data.cyryTotal) {
    //       this.dataList.cyryzs.value = res.data.cyryTotal.cyryTotal;
    //       this.dataList.cyryzs.children.qysyrys.value =
    //         res.data.cyryTotal.qycyryTotal;
    //       this.dataList.cyryzs.children.jgcyrys.value =
    //         res.data.cyryTotal.jgcyryTotal;
    //       this.dataList.cyryzs.children.rysmdjs.value =
    //         res.data.cyryTotal.rysmdjTotal;
    //       this.dataList.cyryzs.children.rycjs.value =
    //         res.data.cyryTotal.rycjsTotal;
    //     } else {
    //       this.dataList.cyryzs.value = 0;
    //       this.dataList.cyryzs.children.qysyrys.value = 0;
    //       this.dataList.cyryzs.children.jgcyrys.value = 0;
    //       this.dataList.cyryzs.children.rysmdjs.value = 0;
    //       this.dataList.cyryzs.children.rycjs.value = 0;
    //     }
    //   }
    // });
    getEmployeeInfo(data).then((res: any) => {
      if (res?.data) {
        if (res.data.zlqyTotal) {
          this.dataList.zlqys.value = res.data.zlqyTotal.zlqysTotal;
          this.dataList.zlqys.children.qytjkybgs.value =
            res.data.zlqyTotal.qytjkybgsTotal;
          this.dataList.zlqys.children.qycjs.value =
            res.data.zlqyTotal.qycjsTotal;
        } else {
          this.dataList.zlqys.value = 0;
          this.dataList.zlqys.children.qytjkybgs.value = 0;
          this.dataList.zlqys.children.qycjs.value = 0;
        }
        if (res.data.jjjgTotal) {
          this.dataList.jjjgs.value = res.data.jjjgTotal.jjjgsTotal;
          this.dataList.jjjgs.children.jgbas.value =
            res.data.jjjgTotal.jgbasTotal;
          this.dataList.jjjgs.children.jgcjs.value =
            res.data.jjjgTotal.jgcjsTotal;
        } else {
          this.dataList.jjjgs.value = 0;
          this.dataList.jjjgs.children.jgbas.value = 0;
          this.dataList.jjjgs.children.jgcjs.value = 0;
        }
        if (res.data.cyryTotal) {
          this.dataList.cyryzs.value = res.data.cyryTotal.cyryTotal;
          this.dataList.cyryzs.children.qysyrys.value =
            res.data.cyryTotal.qycyryTotal;
          this.dataList.cyryzs.children.jgcyrys.value =
            res.data.cyryTotal.jgcyryTotal;
          this.dataList.cyryzs.children.rysmdjs.value =
            res.data.cyryTotal.rysmdjTotal;
          this.dataList.cyryzs.children.rycjs.value =
            res.data.cyryTotal.rycjsTotal;
        } else {
          this.dataList.cyryzs.value = 0;
          this.dataList.cyryzs.children.qysyrys.value = 0;
          this.dataList.cyryzs.children.jgcyrys.value = 0;
          this.dataList.cyryzs.children.rysmdjs.value = 0;
          this.dataList.cyryzs.children.rycjs.value = 0;
        }
      }
    });
  }
  showDialog(item: any) {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
      new Date().getMonth() + 1
    ) {
    } else {
      let floorSiteData: any = {
        name: "",
        children: []
      };
      if (["租赁企业数", "经纪机构数"].includes(item.name)) {
        floorSiteData = JSON.parse(JSON.stringify(item));
        this.$store.commit("panel/setDialogShow", false);
        this.$nextTick(() => {
          this.$store.commit("panel/setDialogShow", true);
          this.$store.commit("panel/setDialog", "floorSite");
          this.$store.commit("panelData/setFloorSiteData", floorSiteData);
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 225px;
}
</style>
